<template>
  <div>
    <backHeader pageTitle="搜索" />
    <div class="container" ref="container" id="container">
      <div class="search">
        <form @submit.prevent> 
          <input
            ref="searchInput"
            type="search"
            @keypress="toSearch"
            v-model="searchKey"
            placeholder="请输入片名"
          />
          <div class="button" @click="toSearch">搜索</div>
          <div style="clear:both"></div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import backHeader from "@/components/public/backHeader.vue";
import { size, sizeType } from "@/lib/getSize.js";
export default {
  namr: "serach",
  data() {
    return {
      searchKey: ""
    };
  },
  mounted() {
    this.initLayout();
    this.$nextTick(() => {
      this.$refs.searchInput.focus();
    });
  },
  methods: {
    /*
      布局相关
    */
    initLayout() {
      //初始化容器.
      this.device = size.getDeviceType();
      let rectSize = size.GET(sizeType.document);
      this.$refs.container.style.width = rectSize.width + "px";
      this.$refs.container.style.height = rectSize.height - 40 + "px";
      this.$refs.container.style.marginTop = "40px";
    },
    toSearch(event = null) {
      if (event.keyCode != undefined) {
        if (event.keyCode == 13) {
          event.preventDefault(); //禁止默认事件（默认是换行）
          if (this.searchKey != "") {
            this.$router.push({
              path: "home",
              query: { name: this.searchKey }
            });
          } else {
            alert("请输入片名.");
          }
        }
      } else {
        if (this.searchKey != "") {
          this.$router.push({ path: "home", query: { name: this.searchKey } });
        } else {
          alert("请输入片名.");
        }
      }
    }
  },
  components: {
    backHeader
  }
};
</script>

<style>
.container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  clear: both;
  background-color: hsl(0, 0%, 96%);
  width: 100%;
  overflow-y: auto;
}
.search {
  width: calc(100% - 41px);
  margin-left: 10px;
  margin-top: 10px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

.search input {
  width: calc(100% - 60px);
  color: hsl(0, 0%, 80%);
  outline: none;
  border: 0px;
  height: 30px;
  line-height: 30px;
  float: left;
}
.search .button {
  margin-left: 10px;
  background-color: #409fff;
  text-align: center;
  color: #fff;
  width: 50px;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  float: left;
  cursor: pointer;
}
</style>